<template>
	<view class="flex-y-c">
		<view class="title f48">{{'注册账号'}}</view>
		<view class="input-view">
			<view class="flex-x-c">
				<image class="login-icon" src="@/static/public/phone_login.png"></image>
				<div class="input-inner">
					<input class="line-input" type="number" v-model="phone" placeholder-class="placeholder-style" placeholder="请输入手机号码" />
				</div>
			</view>
			<view class="flex-x-c">
				<image class="login-icon code" src="@/static/public/pass_word.png"></image>
				<div class="input-inner code">
					<input class="line-input" type="text" password v-model="pwd" placeholder-class="placeholder-style" :placeholder="'请输入密码'" />
				</div>
			</view>
			<view class="flex-x-c">
				<image class="login-icon code" src="@/static/public/pass_word.png"></image>
				<div class="input-inner code">
					<input class="line-input" type="text" password v-model="pwd" placeholder-class="placeholder-style" :placeholder="'请再次输入密码'" />
				</div>
			</view>
			<view :class="['btn', {'red': canConfirm}]" @click="confirmLogin">快速注册</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pwd: '',
				phone: '',
				validCode: '',
				codeTime: 0,
				isForget: true
			}
		},
		computed:{
			canConfirm() {
				return this.phone && this.validCode && this.pwd
			}
		},
		onLoad(param) {
		},
		methods: {
			loginGetValidCode() {
				if (this.codeTime) return
				if (!isPhoneNumber(this.phone)) return this.$Toast('请输入正确的手机号！')
				getValidCode({
					nationCode: '86',
					phone: this.phone,
					type: this.isForget ? 2 : 1
				}).then(res => {
					this.$Toast('验证码已发送！')
					this.codeTime = 60
					codeTik = setInterval(() => {
						this.codeTime--
						if (!this.codeTime) {
							clearInterval(codeTik)
						}
					}, 1000)
				}, () => {
					this.$Toast('验证码发送失败！')
				})
			},
			confirmLogin() {
				if (!this.canConfirm) return
				if (!isPhoneNumber(this.phone)) return this.$Toast('请输入正确的手机号！')
				if (!this.validCode) return this.$Toast('请输入验证码！')
				registerUser({
					phone: this.phone,
					pwd: Crypto.SHA256(this.pwd),
					validCode: this.validCode
				}).then(res => {
					this.$Toast('注册成功！')
					setTimeout(() => {
						uni.navigateBack({})
					}, 1500)
				})
			},
			conForget() {
				if (!this.canConfirm) return
				if (!isPhoneNumber(this.phone)) return this.$Toast('请输入正确的手机号！')
				if (!this.validCode) return this.$Toast('请输入验证码！')
				resetPwdUser({
					phone: this.phone,
					pwd: Crypto.SHA256(this.pwd),
					validCode: this.validCode
				}).then(res => {
					this.$Toast('重置成功！')
					setTimeout(() => {
						uni.navigateBack({})
					}, 1500)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title{
		width: 600rpx;
		margin-top: 92rpx;
	}
	.btn{
		margin-top: 162rpx;
		width: 600rpx;
		height: 88rpx;
		text-align: center;
		color: #fff;
		line-height: 88rpx;
		border-radius: 44rpx;
		background: #d3d7de;
		box-shadow: 0 6rpx 12rpx rgba(211, 215, 222, 0.16);
	}
	.red{
		background: $u-main-color;
	}
	.input-view{
		margin-top: 60rpx;
		.login-icon{
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}
		.input-inner{
			height: 72rpx;
			width: 540rpx;
			border-bottom: 2rpx solid #dfe4eb;
			display: flex;
			align-items: center;
			position: relative;
			.line-input{
				font-size: 32rpx;
			}
			.short{
				width: 300rpx;
			}
			.get-code{
				position: absolute;
				right: 0;
				bottom: 0;
				height: 72rpx;
				line-height: 72rpx;
				text-align: right;
			}
		}
		.code{
			margin-top: 24rpx
		}
	}
</style>